<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>乐淘电商</title>
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="lib/bootstrap-validator/css/bootstrapValidator.min.css">
  <link rel="stylesheet" href="lib/nprogress/nprogress.css">
  <link rel="stylesheet" href="css/common.css">
</head>

<body>

  <!-- 左侧菜单栏 -->
  <div class="lt_aside">
    <!-- 标题 -->
    <div class="brand"><a href="#">黑马商城</a></div>

    <!-- 头像 -->
    <div class="user">
      <img src="images/default.png">
      <p>超级管理员</p>
    </div>

    <!-- 导航-->
    <div class="nav">
      <ul>
        <li><a href="user.html"><i class="glyphicon glyphicon-user"></i><span>用户管理</span></a></li>
        <li>
          <a href="javascript:;" class="category"><i class="glyphicon glyphicon-list"></i><span>分类管理</span></a>
          <div class="child" style="display: none;">
            <a href="first.html">一级分类</a>
            <a href="second.html">二级分类</a>
          </div>
        </li>
        <li><a href="product.html" class="current"><i class="glyphicon glyphicon-tags"></i><span>商品管理</span></a></li>
      </ul>
    </div>
  </div>

  <!-- 右侧内容 -->
  <div class="lt_main">
    <!-- 头部导航菜单 -->
    <div class="lt_topbar">
      <a href="#" class="pull-left icon_menu"><i class="glyphicon glyphicon-align-justify"></i></a>
      <a href="#" class="pull-right icon_logout"><i class="glyphicon glyphicon-log-out"></i></a>
    </div>

    <!-- 下面的内容 -->
    <div class="container-fluid">

      <!-- 路径导航 -->
      <ol class="breadcrumb">
        <li><a href="index.html">管理系统</a></li>
        <li class="active">商品管理</li>
      </ol>

      <div class="lt_content">

        <button class="btn btn-default mb_20" id="addBtn">添加商品</button>

        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th width="10%">序号</th>
              <th width="25%">商品名称</th>
              <th width="25%">商品描述</th>
              <th width="10%">商品库存</th>
              <th width="10%">商品尺寸</th>
              <th width="10%">商品状态</th>
              <th width="10%">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 刨个坑 -->
          </tbody>
        </table>

        <!-- 分页dom结构 -->
        <div class="text-right">
          <ul id="paginator"></ul>
        </div>

      </div>

    </div>
  </div>

  <!-- 添加商品的模态框 -->
  <div class="modal fade" id="addModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          <h4 class="modal-title">添加商品</h4>
        </div>
        <div class="modal-body">
          <form id="form">
            <div class="form-group">
              <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                  <span id="dropdownText">请选择二级分类</span>
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <!-- 刨个坑 -->
                </ul>
              </div>
              <!-- 二级分类id: 归属的品牌 -->
              <input type="hidden" name="brandId">
            </div>

            <!-- 商品名称 -->
            <div class="form-group">
              <input type="text" class="form-control" placeholder="请输入商品名称" name="proName">
            </div>

            <!-- 商品描述 -->
            <div class="form-group">
              <textarea class="form-control" rows="3" name="proDesc" placeholder="请输入商品描述"></textarea>
            </div>


            <!-- 商品库存 -->
            <div class="form-group">
              <input type="text" class="form-control" placeholder="请输入商品库存" name="num">
            </div>

            <!-- 商品尺码 -->
            <div class="form-group">
              <input type="text" class="form-control" placeholder="请输入商品尺码" name="size">
            </div>

            <!-- 商品原价 -->
            <div class="form-group">
              <input type="text" class="form-control" placeholder="请输入商品原价" name="oldPrice">
            </div>

            <!-- 商品现价 -->
            <div class="form-group">
              <input type="text" class="form-control" placeholder="请输入商品现价" name="price">
            </div>



            <div class="form-group">
              <label class="btn btn-default" for="fileupload">上传图片</label>
              <!-- 注意:
                    1. 指定name用于让后台获取图片, 所以不能乱写
                    2. 指定data-url, 指定接口地址
                    3. multiple 用于多文件上传
            -->
              <input type="file" multiple name="pic1" data-url="/product/addProductPic" id="fileupload"
                style="display: none;">
            </div>
            <div class="form-group" id="imgBox">

              <!-- 作用: 标记当前图片有没有上传满三张 -->
              <input type="hidden" name="picStatus">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <!-- html5 新增 form 属性, 可以让表单外的按钮, 与表单关联起来(就相当于是写在了表单里面)-->
          <button type="submit" class="btn btn-primary" form="form">添加</button>
        </div>
      </div>
    </div>
  </div>



  <!-- 登录退出的模态框,  配置 data-dismiss="modal" 可以关闭模态框 -->
  <div class="modal fade" id="logoutModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          <h4 class="modal-title">温馨提示</h4>
        </div>
        <div class="modal-body">
          <p class="red"><i class="glyphicon glyphicon-info-sign"></i>您确定要退出后台管理系统吗？</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="logoutBtn">退出</button>
        </div>
      </div>
    </div>
  </div>


  <script type="text/html" id="productTpl">
    {{ each rows v i }}
    <tr>
      <td>{{ (page-1)*size + (i+1) }}</td>
      <td>{{ v.proName }}</td>
      <td>{{ v.proDesc }}</td>
      <td>{{ v.num }}</td>
      <td>{{ v.size }}</td>
      <td>{{ v.statu === 1 ? "已上架" : "已下架" }}</td>
      <td>
        {{ if v.statu === 1 }}
        <button class="btn btn-danger">下架</button>
        {{ else }}
        <button class="btn btn-success">上架</button>
        {{ /if }}
      </td>
    </tr>
    {{ /each }}
  </script>

  <script type="text/html" id="dropdownTpl">
    {{ each rows v i }}
    <li><a data-id="{{ v.id }}" href="#">{{ v.brandName }}</a></li>
    {{ /each }}
  </script>




  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  <script src="lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
  <script src="lib/nprogress/nprogress.js"></script>
  <script src="lib/artTemplate/template-web.js"></script>
  <script src="lib/bootstrap-paginator/bootstrap-paginator.min.js"></script>
  <!-- 引入 jquery-fileupload 包 -->
  <script src="lib/jquery-fileupload/jquery.ui.widget.js"></script>
  <script src="lib/jquery-fileupload/jquery.fileupload.js"></script>

  <script src="js/common.js"></script>
  <script src="js/product.js"></script>

</body>

</html>